<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="50" title="员工中心" title-size="36" title-color="#333"></u-navbar>
        <tabBar :selectedIndex="0"></tabBar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="goods_area">
              <view
                class="view_box"
                @click="grabbing(item)"
                v-for="(item, index) in itemList"
                :key="index"
              >
                <u-avatar :src="item.user.avatar" size="90"></u-avatar>
                <view class="view-info">
                  <view> 用户：{{ item.user.nickname }} </view>
                  <view class="view-info-p" v-if="item.message">
                    <!-- 01/05&nbsp;09:00 -->
                    <!-- 有咨询新消息 -->
                    {{
                      item.message.length > 15 ? item.message.substr(0, 15) + '...' : item.message
                    }}
                  </view>
                </view>
                <view
                  class="view-tip"
                  v-if="item.salesmanUserId == 0"
                  style="background-color: #fea121"
                >
                  抢单
                </view>
                <view
                  class="view-tip"
                  v-else-if="item.salesmanUserId == userId"
                  style="background-color: #67c23a"
                >
                  成功
                </view>
                <view class="view-tip" v-else style="background-color: #909399"> 已流失 </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <view
            class="view_box"
            @click="routeTo2(item)"
            v-for="(item, index) in chatList"
            :key="index"
          >
            <u-avatar :src="item.content.senderAvatar" size="90"></u-avatar>
            <view class="view-info">
              <view>
                {{ item.content.senderNickname }}
              </view>
              <view class="view-info-p" v-if="item.content.contentType == 102"> [图片] </view>
              <view class="view-info-p" v-else-if="item.content.contentType == 103"> [语音] </view>
              <view class="view-info-p" v-else-if="item.content.contentType == 104"> [视频] </view>
            </view>
            <view style="align-self: flex-start; position: relative">
              <!-- <view class="">
									一分钟前
								</view> -->
              <u-badge
                v-if="item.msgCount"
                type="error"
                :count="item.msgCount"
                :offset="[60, 22]"
              ></u-badge>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
    <u-icon class="refresh" name="/static/img/shuaxin2.png" size="100"></u-icon>
  </view>
</template>

<script>
import { msgDostribution } from '../../common/msgDistribution'
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '抢单'
        },
        {
          name: '会话'
        }
      ],
      itemList: [],
      itemList2: [],
      order_id: '',
      chatList: [{ content: '' }],
      userId: ''
    }
  },
  onLoad(res) {
    //let self = this;
    // this.$nextTick(function() {
    // 	self.current = Number(res.index) ? Number(res.index) : 0;
    // 	self.scurrent = Number(res.index) ? Number(res.index) : 0;
    // 	self.onOrderLoad(self.current, null, true);
    // });
    this.userId = uni.getStorageSync('userInfo').id
    uni.$on('msgRefresh', (res) => {
      this.chatList = uni.getStorageSync('chatList')
    })

    uni.$on('msGrabbing', () => {
      this.queryList()
    })
  },
  onShow() {
    this.chatList = uni.getStorageSync('chatList')
    this.queryList()
  },
  methods: {
    back() {
      uni.switchTab({
        url: '/pages/ucenter/ucenter'
      })
    },
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.current == 0) {
        this.queryList()
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get(`/app-api/trade/pre-sale-consultation/page?pageNo=${pageNo}&pageSize=${pageSize}`)
        .then((res) => {
          //this.itemList =
          this.$refs.paging.complete(res.data.list)
        })
    },

    onOrderCancel(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消订单吗？', () => {
        self.$u.api.setOrderCancel(item.id).then((res) => {
          self.$u.toast('取消成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onOrderPayment(item) {
      let self = this
      // self.$u.api.setTestPayments({
      // 	order_no: item.order_no,
      // 	openid: uni.getStorageSync('openid')
      // }).then(res => {
      // 	setTimeout(function() {
      // 		self.onOrderLoad(self.current, null, true);
      // 	}, 500);
      // });
      this.$utils.route({
        url: '/goods/payment/payment',
        params: {
          order_id: item.id,
          money: item.pay_price,
          total_weight: item.total_weight,
          delivery_price: item.delivery_price
        }
      })
    },
    onOrderConfrim(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认收货吗？', () => {
        self.$u.api.setOrderConfirm(item.id).then((res) => {
          self.$u.toast('收货成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onResellPush(item) {
      this.$utils.route({
        url: '/goods/resell-push/resell-push',
        params: {
          id: item.id
        }
      })
    },
    onPushComment(item) {
      this.$utils.route({
        url: '/other/push-comment/push-comment',
        params: {
          id: item.id
        }
      })
    },
    onOrderDetail(item) {
      // this.$utils.route({
      // 	url: '/pages/order-details/order-details',
      // 	params: {
      // 		id: item.id
      // 	}
      // });
    },

    grabbing(e) {
      console.log(e, this.userId)
      if (e.salesmanUserId == this.userId) {
        uni.navigateTo({
          url: '/other/customer-chat/customer-chat?id=' + e.userId
        })
        return
      }
      this.$u
        .put('/app-api/trade/pre-sale-consultation/update-grabbed', { id: e.id })
        .then((res) => {
          uni.navigateTo({
            url: '/other/customer-chat/customer-chat?id=' + e.userId
          })
        })
    },
    routeTo2(e) {
      e.msgCount = 0
      uni.setStorageSync('chatList', this.chatList)
      uni.$emit('msgCount')
      uni.navigateTo({
        url: '/other/customer-chat/customer-chat?id=' + e.content.senderId
      })
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  background: #f0f1f2;
}
.view_box {
  display: flex;
  padding: 20rpx;
  align-items: center;
  background-color: #fff;
  border-bottom: #ededed solid 2rpx;
}
.view-info {
  flex: 1;
  margin-left: 10rpx;
  line-height: 55rpx;
}
.view-info-p {
  font-size: 26rpx;
  color: #999;
}
.view-tip {
  width: 90rpx;
  height: 90rpx;
  border-radius: 90rpx;
  color: #fff;
  font-size: 24rpx;
  line-height: 90rpx;
  text-align: center;
}
.refresh {
  position: fixed;
  bottom: 35rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
}
</style>
